<template>
    <div class="Echat">
        <div id="ServicePackage"></div>
    </div>
</template>
<script>
    import * as echarts from "echarts";
    
    export default {
        name: 'Service',
        props: {
            ServiceTitle: String,
            Histogram: Array,
            HistogramData: Array,
    
        },
    
        data() {
            return {};
        },
    
        mounted() {
            this.initChart(this.ServiceTitle, this.Histogram, this.HistogramData);
    
        },
        methods: {
            initChart() {
                // 创建 echarts 实例。
            var chartDom = document.getElementById('ServicePackage');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: this.ServiceTitle,
                    /*textVerticalAlign:'center'*/
                    // textAlign:'center'
                    textStyle: {//标题内容的样式
                        color: '#000',
                        fontWeight: "lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                        fontFamily: "PingFangHK-Medium",//主题文字字体，默认微软雅黑
                        fontSize: 14//主题文字字体大小，默认为18px
                        
                    },
                    padding:15,//各个方向的内边距，默认是15，可以自行设置
                },
                xAxis: {
                    type: 'category',
                    data: this.Histogram,
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data:this.HistogramData,
                        type: 'bar',
                        barWidth: 30,//柱图宽度
                    }
                ]
            };
            option && myChart.setOption(option);
            }
        },
    };
    </script>
<style lang="less" scoped>
.Echat {
    position: relative;
    margin: 30px auto;
    box-shadow: 0px 2px 7px 0px rgb(224, 224, 224);
    padding: 10px;
    border-radius: 5px;

    // box-shadow: 10px 10px 5px rgb(242, 245, 246);
    #ServicePackage {
        height: 430px;

    }
}
</style>
    